<template>
	<view class="content p0_30">
		<view class="icon-box">
			<view class="logo">
				<image src="../../static/images/logo02.png" mode="widthFix"></image>
			</view>
			<view class="icon">
				<image src="../../static/images/icon16.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="search-box">
			<view class="icon" @click="search">
				<image src="../../static/images/icon17.png" mode="widthFix"></image>
			</view>
			<input type="text" v-model="keyword" confirm-type="search" @confirm="search">
		</view>

		<view class="gear-box">
			<view class="title">
				全部搭配
			</view>
			<view class="list">
				<view class="item" :class="{on: recommendTypeId === item.id}" v-for="(item,index) in gear" :key="index" @click="changeGear(item.id)">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="gear-list">
			<view class="item" v-for="item,index in list" :key="index" @click="goDetail(item.id, 4)">
				<image class="cover" v-if="item.titleImage !== null" :src="baseUrl + item.titleImage" mode="widthFix"></image>
				<view class="list">
					<view class="pic">
						<image :src="baseUrl + item.image.thumbnail" mode="widthFix"></image>
					</view>
					<view class="text">
						<view class="t1">{{item.name}}</view>
						<view class="t2">￥{{item.price}}</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getCategory,
		productPage
	} from '@/api/product.js';
	export default {
		data() {
			return {
				gear: [],
				recommendTypeId: '',
				list: [],
				baseUrl: this.$baseUrl,
				keyword: '',
				typeCategoryId: 4
			};
		},
		onLoad() {
			this.category()
			this.init()
		},
		methods: {
			async category() {
				await getCategory().then(res => {
					this.gear = res.data.category[3].collocationCategory
					this.recommendTypeId = this.gear[0].id
				})
			},
			init() {
				productPage({recommendTypeId: this.recommendTypeId, typeCategoryId: this.typeCategoryId, type: 'GENERAL', keyword: this.keyword}).then(res => {
					res.data.page.list.forEach(r => {
						this.list.push(r)
					})
				})
			},
			changeGear(id) {
				this.recommendTypeId = id
				this.typeCategoryId = 4
				this.list = []
				this.init()
			},
			search() {
				this.recommendTypeId = ''
				this.typeCategoryId = ''
				this.list = []
				this.init()
			},
			goDetail(id, typeId) {
				uni.navigateTo({
					url: '../allgoods/details?id=' + id + '&typeId=' + typeId
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.icon-box {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 60rpx 0;

			.logo {
				width: 90rpx;
				padding: 0 30rpx;
				box-sizing: unset;
				position: relative;
			}

			.logo::after {
				width: 2px;
				height: 30rpx;
				background-color: #efefef;
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			.icon {
				width: 50rpx;
				padding: 0 30rpx;
				box-sizing: unset;
			}
		}

		.search-box {
			width: 100%;
			height: 80rpx;
			background-color: #efefef;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 40rpx;

			.icon {
				width: 32rpx;
				margin-right: 20rpx;
			}

			input {
				width: 100%;
			}
		}

		.gear-box {
			padding: 60rpx 0;

			.title {
				font-size: 30rpx;
				letter-spacing: 2px;
				color: #3e3a39;
				margin-bottom: 40rpx;
			}

			.list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.item {
					line-height: 60rpx;
					padding: 0 25rpx;
					border-radius: 30rpx;
					background-color: #efefef;
					font-size: 28rpx;
					margin-right: 15rpx;
					margin-bottom: 15rpx;
				}
				
				.item.on {
					background-color: #C10016;
					color: #fff;
				}

				.item:last-child {
					margin-right: 0;
				}
			}
		}


		.gear-list {
			.item {
				.cover {}

				.list {
					display: flex;
					align-items: center;
					padding: 60rpx 80rpx;

					.pic {
						width: 110rpx;
						margin-right: 110rpx;
					}

					.text {
						.t1 {
							color: #595757;
							font-size: 30rpx;
							letter-spacing: 6rpx;
							margin-bottom: 20rpx;
						}

						.t2 {
							color: #898989;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
